{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<div class="c-pricing-block-horizontal">
  <div class="mzp-l-columns mzp-t-columns-three">
    <div class="c-pricing-details">
      <h2 class="c-pricing-details-heading">{{ ftl('vpn-pricing-included-in-subscription') }}</h2>

      <ul class="mzp-u-list-styled">
        <li>{{ ftl('vpn-pricing-connect-up-to', devices=connect_devices) }}</li>
        <li>{{ ftl('vpn-pricing-access', servers=connect_servers, countries=connect_countries) }}</li>
        <li>{{ ftl('vpn-pricing-money-back') }}</li>
      </ul>

      {% include 'products/vpn/includes/unsupported-language.html' %}
    </div>

    <section class="c-pricing-block">
      <header class="c-pricing-block-header">
        <p class="c-pricing-block-tag">{{ ftl('vpn-shared-pricing-recommended-offer') }}</p>

        <h2 class="c-pricing-block-heading">
          {{ ftl('vpn-pricing-annual') }}
        </h2>

        <h3 class="c-pricing-block-sub-heading">
          {{ vpn_monthly_price(plan='12-month', country_code=country_code, lang=LANG) }}
        </h3>
      </header>

      <div class="c-pricing-block-detail">
        <p class="c-pricing-block-saving">{{ vpn_saving(country_code=country_code, lang=LANG) }}</p>
        <p class="c-pricing-block-total">{{ vpn_total_price(country_code=country_code, lang=LANG) }}</p>

        {{ vpn_subscribe_link(
          entrypoint=_utm_source,
          link_text=ftl('vpn-pricing-get-annual-subscription'),
          plan='12-month',
          class_name='mzp-c-button mzp-t-product mzp-t-xl',
          country_code=country_code,
          lang=LANG,
          optional_parameters={
            'utm_campaign': _utm_campaign
          },
          optional_attributes={
            'data-cta-type': 'fxa-vpn',
            'data-cta-text': 'Get Mozilla VPN 12-month',
            'data-cta-position': 'pricing',
            'data-glean-id': 'subscribe_intent',
            'data-glean-type': 'annual',
            'data-glean-label': 'vpn',
            'data-testid': 'get-mozilla-vpn-12-month-button'
          })
        }}
        <p class="c-guarantee">{{ ftl('vpn-shared-money-back-guarantee') }}</p>
      </div>
    </section>

    <section class="c-pricing-block">
      <header class="c-pricing-block-header">
        <h2 class="c-pricing-block-heading">
          {{ ftl('vpn-pricing-monthly') }}
        </h2>

        <h3 class="c-pricing-block-sub-heading">
          {{ vpn_monthly_price(plan='monthly', country_code=country_code, lang=LANG) }}
        </h3>
      </header>

      <div class="c-pricing-block-detail">
        {{ vpn_subscribe_link(
          entrypoint=_utm_source,
          link_text=ftl('vpn-pricing-get-monthly-subscription'),
          plan='monthly',
          class_name='mzp-c-button mzp-t-product mzp-t-xl',
          country_code=country_code,
          lang=LANG,
          optional_parameters={
            'utm_campaign': _utm_campaign
          },
          optional_attributes={
            'data-cta-type': 'fxa-vpn',
            'data-cta-text': 'Get Mozilla VPN monthly',
            'data-cta-position': 'pricing',
            'data-glean-id': 'subscribe_intent',
            'data-glean-type': 'monthly',
            'data-glean-label': 'vpn',
            'data-testid': 'get-mozilla-vpn-monthly-button'
          })
        }}
        <p class="c-guarantee">{{ ftl('vpn-shared-money-back-guarantee') }}</p>
      </div>
    </section>
  </div>
</div>
